
import React from 'react';
import { Card } from 'antd';
import createG2 from 'g2-react';
import { Stat, Frame } from 'g2';


const Chart = createG2((chart) => {
  chart.legend('name', {
    position: 'left',
  });
  chart.coord('rect').transpose().scale(1, -1);
  chart.axis(false);
  chart.intervalSymmetric().position('name*value').color('name').shape('pyramid');
  chart.render();
  chart.col('name', {
    min: 1,
    alias: ' ',
  });
});
class FunnelPlot extends React.Component {
  constructor(props) {
    super(props);
    // console.log(props)
    this.state = {
      data: [
        { name: '下单数', value: 100 },
        { name: '成交数', value: 70 },
        { name: '交数', value: 40 },
        { name: '成数', value: 20 },

      ],
      forceFit: true,
      width: 500,
      height: 370,
      m: 0,
      plotCfg: {
        margin: 80,


      },
    };
  }
  componentWillReceiveProps({ msg }) {
    // if (!msg[0].value) {
    //   msg[0].value = 1
    //   msg[1].value = 1
    // }

    // this.setState({
    //   data: msg,
    //   m: Math.ceil(msg[1].value / msg[0].value * 100)
    // })

  }

  render() {
    return (
      <Card style={{ height: 405 }}>
        <div>
          <Chart
            data={this.state.data}
            width={this.state.width}
            height={this.state.height}
            plotCfg={this.state.plotCfg}
            forceFit={this.state.forceFit}
          />
          {/* <div style={{ textAlign: "center"}}>转化率：{this.state.m}%</div>*/}
        </div>
      </Card>
    );
  }
}

FunnelPlot.propTypes = {
};
export default FunnelPlot;
